<template>
    <input type="text" :value="content" @input="iptChange"/>
    <!--<button v-bind="attrs">点击</button>-->
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
    // 如果在子组件中没有写props那么context参数中的attrs属性将包含所有的子组件属性
    props: {
        // modelValue: String
        content: String
    },
    setup(props, {attrs, emit}) {
        // console.log(this); // 为了防止开发者混淆this用法 在setup中直接将this改成了undefined
        // console.log(props);
        function iptChange(e) {
            // console.log(e.target.value);
            // emit 的第一个参数是要修改的props属性 第二个是要改成的值
            emit('update:content', e.target.value)
        }

        return {
            // attrs
            iptChange
        }
    }
})
</script>

<style scoped>
</style>